<template>
  <div class="list">
    <div class="item"  v-for="(item,index) in historyList">
      <div class="left">
        <div class="circle"></div>
        <div class="gap"></div>
      </div>
      <div class="right">
        <div class="date" v-text="item.created"></div>
        <div class="type" v-html="item.logType"></div>
        <div class="detail" v-html="item.logData"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {getRelativeTime} from "@/libs/tools";
import Constants from "@/modules/ticket/constants";

export default {
  name: "history",
  props: {
    historyList:{
      type: Array,
      default: []
    }
  },
  methods: {
    getRelativeTime(date) {
      return getRelativeTime(date)
    },
    ticketJsonToStr(json) {
      let ticket = JSON.parse(json)
      let str = ''
      if(ticket.hasOwnProperty('title')) {
        str += `<div><span style="margin-right: 10px">主题:</span><span>${ticket.title}</span></div>`
      }
      if(ticket.hasOwnProperty('customerName')) {
        str += `<div><span style="margin-right: 10px">联系人:</span><span>${ticket.customerName}</span></div>`
      }
      if(ticket.hasOwnProperty('customerMobile')) {
        str += `<div><span style="margin-right: 10px">联系人电话:</span><span>${ticket.customerMobile}</span></div>`
      }
      if(ticket.hasOwnProperty('customerEmail')) {
        str += `<div><span style="margin-right: 10px">联系人邮箱:</span><span>${ticket.customerEmail}</span></div>`
      }
      if(ticket.hasOwnProperty('assigneeName')) {
        str += `<div><span style="margin-right: 10px">受理人:</span><span>${ticket.assigneeName}</span></div>`
      }
      if(ticket.hasOwnProperty('content')) {
        str += `<div><span style="margin-right: 10px">描述:</span><div style="padding-left: 15px">${ticket.content}</div></div>`
      }
      return str
    },
    getLogType(item) {
      let actionType = ''
      switch (item.logType) {
        case Constants.LogType.SOLVED:
          if(!item.logData || item.logData.trim().length == 0) {
            actionType = '删除了解决方案'
          }else {
            actionType = '更改最终解决方案为'
          }
          break
        case Constants.LogType.ASSIGN:
          actionType = '将工单分配给'
          break
        case Constants.LogType.CHANGE_STATUS:
          actionType = '更改了工单状态'
          let obj = JSON.parse(item.logData)
          let old = Constants.StatusMap[obj.old]
          let now = Constants.StatusMap[obj.now]
          item.logData = `从<span style="text-decoration: underline">${old.name}</span>更改为<span style="text-decoration: underline">${now.name}</span>`
          break
        case Constants.LogType.COMMENT:
          actionType = '反馈了工单'
          break
        case Constants.LogType.CREATE:
          actionType = '创建了工单'
          item.logData = this.ticketJsonToStr(item.logData)
          break
        case Constants.LogType.UPDATE:
          actionType = '编辑了工单'
          item.logData = this.ticketJsonToStr(item.logData)
          break
        default:
          break
      }
      return `<span style="color:#0091ff">${item.userName}</span>` + actionType
    }
  },
  watch:{
    historyList() {
      let that = this
      this.historyList.forEach(function (item) {
        item.created = that.getRelativeTime(item.created)
        item.logType = that.getLogType(item)
      })
    }
  }
}
</script>

<style scoped lang="less">
.list {
  padding: 15px 0px;
  .item {
    position: relative;
    padding: 0 20px;
    .left {
      position: absolute;
      left: 23px;
      display: flex;
      align-items: center;
      .circle {
        width: 15px;
        height: 15px;
        background: #8E8E8E;
        border-radius: 50%;
        margin-right: 5px;
      }
      .gap {
        width: 30px;
        border: 1px dashed #8E8E8E;
      }
    }
    .right {
      border-left: 1px solid #8E8E8E;
      padding-left: 50px;
      min-height: 50px;
      font-size: 14px;
      margin-left: 10px;
      padding-bottom: 10px;
      .date {
        font-size: 12px;
        color: #666666;
      }
      .type {
        margin-top: 5px;
      }
      .detail {
        margin-top: 5px;
        color: #666666;
      }
    }
  }
}
</style>
